<template>
	<div>
		<div class="titleClassne">费率信息</div>
		<div class="dataUls">
			<template v-for="item in Object.keys(itemData)">
				<li class="lis" :key="item" v-if="item !== '__typename' && item !== 'feeRateInfoList'">
					<div v-if="!!allProperty.find((items) => items.value == item)">
						{{ allProperty.find((items) => items.value == item).label }}
					</div>
					<div v-if="!!allProperty.find((items) => items.value == item)">
						{{ itemData[item] }}
					</div>
				</li>
			</template>
			<li class="lis" v-if="Object.keys(itemData).filter((item) => !['__typename', 'feeRateInfoList'].includes(item)).length % 2 !== 0">
				<div></div>
				<div></div>
			</li>
		</div>
		<template v-if="!!itemData.feeRateInfoList && Array.isArray(itemData.feeRateInfoList)">
			<li class="ratene" v-if="!!itemData.feeRateInfoList.find((item) => item.feeRateType == '9')">
				<div>管理费率</div>
				<div>
					{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '9').feeRate }}
					<span v-if="itemData.feeRateInfoList.find((item) => item.feeRateType == '9').feeRate">
						{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '9').feeRateUnit == '2' ? '元/笔' : '%' }}
					</span>
				</div>
				<div>管理费率备注</div>
				<div>
					{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '9').remark }}
				</div>
			</li>
			<li class="ratene" v-if="!!itemData.feeRateInfoList.find((item) => item.feeRateType == '7')">
				<div>托管费率</div>
				<div>
					{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '7').feeRate }}
					<span v-if="itemData.feeRateInfoList.find((item) => item.feeRateType == '7').feeRate">
						{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '7').feeRateUnit == '2' ? '元/笔' : '%' }}
					</span>
				</div>
				<div>托管费率备注</div>
				<div>
					{{ itemData.feeRateInfoList.find((item) => item.feeRateType == '7').remark }}
				</div>
			</li>
		</template>
	</div>
</template>
<script>
export default {
	name: 'ExportrateInfo',
	props: {
		allProperty: {
			type: Array,
			default: Array
		},
		itemData: {
			type: Object,
			default: Object
		}
	}
}
</script>
<style lang="scss" scoped>
.ratene {
	width: 100%;
	display: flex;
	border-left: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
	div {
		width: 25%;
		border-right: 1px solid #dcdfe6;
		display: flex;
		align-items: center;
		padding: 10px 10px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
